<template>
    <view>
        <!-- 作者信息 S -->
        <view class="user_info">
            <view class="user_icon">
                <image mode="widthFix" :src="imgDetail.user.avatar"></image>
            </view>
            <view class="user_desc">
                <view class="user_name">{{imgDetail.user.name}}</view>
                <view class="user_time">{{imgDetail.cnTime}}</view>
            </view>
        </view>
        <!-- 作者信息 E -->

        <!-- 高清大图 S -->
        <view class="high_img">
            <swiper-action @swiperAction='handleSwiper'>
            <!-- <image mode="widthFix" :src="imgDetail.newThumb"></image> -->
            <image mode="widthFix" :src="imgDetail.thumb"></image>
            </swiper-action>
        </view>
        <!-- 高清大图 E -->
        <!-- 点赞 收藏 S -->
        <view class="user_rank">
            <view class="rank">
                <text class="iconfont icon-good">{{imgDetail.rank}}</text>
            </view>
            <view class="collect">
                <text class="iconfont icon-favorites">收藏</text>
            </view>
        </view>
        <!-- 点赞 收藏 E -->
        <!-- 专辑 S -->
        <view class="album_wrap" v-if="album.length">
            <view class="album_title">相关</view>
            <view class="album_list">
                <view class="album_item" v-for="item in album" :key="item.id">
                    <view class="album_cover">
                        <image mode="aspectFill" :src="item.cover"></image>
                    </view>
                    <view class="album_info">
                        <view class="album_text">专辑</view>
                        <view class="album_name">{{item.name}}</view>
                        <text class="iconfont icon-arrow-right"></text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 专辑 E -->

        <!-- 最热评论 comment hot S -->
        <view class="comment hot" v-if="hot.length">
            <view class="comment_title">
                <text class="iconfont icon-hot-fill"></text>
                <text class="comment_text">最热评论</text>
            </view>
            <view class="comment_list">
                <view class="comment_item" v-for="item in hot" :key="item.id">
                    <!-- 用户信息 -->
                    <view class="comment_user">
                        <!-- 用户头像 -->
                        <view class="comment_cover">
                            <image mode="widthFix" :src="item.user.avatar"></image>
                        </view>
                        <!-- 用户名称  -->
                        <view class="comment_name">
                            <view class="comment_nickname">{{item.user.name}}</view>
                            <view class="comment_atime">{{item.cntime}}</view>
                        </view>
                        <!-- 用户徽章 -->
                        <view class="comment_user_icon">
                            <image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
                        </view>
                    </view>
                    <!-- 评论内容 -->
                    <view class="comment_desc">
                        <view class="comment_content">{{item.content}}</view>
                        <view class="comment_like">
                            <text class="iconfont icon-good">{{item.size}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 最热评论 comment hot E -->

        <!-- 最新评论 comment hot S -->
        <view class="comment new" v-if="comment.length">
            <view class="comment_title">
                <text class="iconfont icon-comments"></text>
                <text class="comment_text">最新评论</text>
            </view>
            <view class="comment_list">
                <view class="comment_item" v-for="item in comment" :key="item.id">
                    <!-- 用户信息 -->
                    <view class="comment_user">
                        <!-- 用户头像 -->
                        <view class="comment_cover">
                            <image mode="widthFix" :src="item.user.avatar"></image>
                        </view>
                        <!-- 用户名称  -->
                        <view class="comment_name">
                            <view class="comment_nickname">{{item.user.name}}</view>
                            <view class="comment_atime">{{item.cntime}}</view>
                        </view>
                        <!-- 用户徽章 -->
                        <view class="comment_user_icon">
                            <image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
                        </view>
                    </view>
                    <!-- 评论内容 -->
                    <view class="comment_desc">
                        <view class="comment_content">{{item.content}}</view>
                        <view class="comment_like">
                            <text class="iconfont icon-good">{{item.size}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 最热评论 comment hot E -->
        <!-- 下载图片 S -->
        <view class="download">
            <view class="download_btn" @tap="handleDownload">下载图片</view>
        </view>
        <!-- 下载图片 E -->
    </view>
</template>
<script>
import moment from 'moment';
moment.locale('zh-cn');
import swiperAction from '@/components/swiperAction';
export default {
    components: {
        swiperAction
    },
    data() {
        return {
            imgDetail: {},
            album: [],
            comment: [],
            hot: [],
            imgIndex: 0
        }
    },
    onLoad(){
        console.log(getApp().globalData);
        const {imgIndex} = getApp().globalData;

        this.imgIndex = imgIndex;
        this.getData();
    },
    methods: {
        getData(){
            const {imgList} = getApp().globalData;
            this.imgDetail = imgList[this.imgIndex];
            // 大图接口有调整 newThumb -> thumb
            // this.imgDetail.newThumb = this.imgDetail.thumb + this.imgDetail.rule.replace('$<Height>','360');
            this.imgDetail.cnTime = moment(this.imgDetail.atime * 1000 ).fromNow();
            this.getComments(this.imgDetail.id);
        },
        getComments(id){
            this.request({
                url:`http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
            })
            .then(result=>{
                console.log(result);
                this.album = result.res.album;
                result.res.comment.forEach(element => {
                   element.cntime =  moment(element.atime * 1000 ).fromNow();
                });
                result.res.hot.forEach(element => {
                   element.cntime =  moment(element.atime * 1000 ).fromNow();
                });
                this.comment = result.res.comment;
                this.hot = result.res.hot;
            })
        },
        handleSwiper(e){
            // console.log(e);
            // 左滑 imgIndex++ 
            // e.direction == 'left' && imgIndex < imgList.length - 1 
            // 右滑 imgIndex-- 
            // e.direction == 'right'&& imgIndex > 0 

            const {imgList} = getApp().globalData;
            if( e.direction == 'left' && this.imgIndex < imgList.length - 1 ){
                this.imgIndex++;
                this.getData();
            }else if( e.direction == 'right' && this.imgIndex > 0){
                this.imgIndex--;
                this.getData();
            }else{
                uni.showToast({
                    title:'没有更多数据了',
                    icon:'none'
                })
            }

        },
        async handleDownload(){
            await uni.showLoading({
                title:'下载中'
            })
            let result1 = await uni.downloadFile({
                url: this.imgDetail.img
            });
            let {tempFilePath} = result1[1];
            let result2 = await uni.saveImageToPhotosAlbum({
                filePath: tempFilePath
            })
            uni.hideLoading();
            await uni.showToast({
                title:'下载成功'
            })

            
        }
    },
}
</script>
<style lang="scss" scoped>
.user_info {
    display: flex;
    padding:20rpx;
  .user_icon {
      padding: 0 20rpx;
    image {
        width: 88rpx;
        border-radius: 50%;
    }
  }
  .user_desc {
    .user_name {
        color: #000;
        font-weight: 600;
    }
    .user_time {
        color: #ccc;
        font-size: 24rpx;
        padding: 10rpx 0;
    }
  }
} 

.high_img{
    image{
        border-bottom: 1rpx solid #eee;
    }
}

.user_rank {
    display: flex;
    height: 80rpx;
    border-bottom: 5rpx solid #eee;
  .rank {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    .icon-good {

    }
  }

  .collect {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    .icon-favorites {

    }
  }
}
.album_wrap {
    padding: 10rpx;
  .album_title {
      padding: 10rpx 0;
  }

  .album_list {
    .album_item {
        display: flex;
        padding: 10rpx 0;
        border-bottom: 10rpx solid #eee;
      .album_cover {
          flex: 1;
        image {
            width: 180rpx;
            height: 180rpx;
        }
      }

      .album_info {
          flex: 3;
          padding-left: 20rpx;
          position: relative;
        .album_text {
            width: 100rpx;
            height: 50rpx;
            background-color: $color;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .album_name {
            padding: 10rpx 0;
            color: #888;
        }

        .icon-arrow-right {
            position: absolute;
            font-size: 40rpx;
            top: 50%;
            transform: translateY(-50%);
            right: 10%;
            color: #000;
        }
      }
    }
  }
}

.comment {

  .comment_title {
      padding: 15rpx;
    .icon-hot-fill {
        color: red;
        font-size: 40rpx;
    }

    .comment_text {
        font-weight: 600;
        font-size: 24rpx;
        color: #666;
        margin-left: 10rpx;
    }
  }

  .comment_list {
      .comment_item {
          
          border-bottom: 5rpx solid #eee;

  .comment_user {
    padding: 10rpx;
    display: flex;
    .comment_cover {
        width: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
      image {
          width: 90%;
      }
    }

    .comment_name {
        flex: 1;
      .comment_nickname {
          color: #888;
      }

      .comment_atime {
          color: #555;
          font-size: 24rpx;

      }
    }

    .comment_user_icon {
      image {
          width: 40rpx;
          height: 40rpx;
          display: inline-block;
      }
    }
  }

  .comment_desc {
      display: flex;
      padding: 30rpx 0;
    .comment_content {
        flex: 1;
        padding-left: 15%;
        color: #000;
    }

    .comment_like {
        text-align: center;
      .icon-good {

      }
    }
  }
    }
  } 
}

.new {
    .comment_title{
        .icon-comments {
            color: aqua;
        }
    }
}

.download {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120rpx;
    .download_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 95%;
        height: 80%;
        background-color: $color;
        color: #fff;
        font-size: 50rpx;
        font-weight: 600;
    }
}
</style>